<template>
  <div id="invoicepdf" class="dashboard-container body-min-width">
    <h2 class="head-big-title">Pesanan Saya #{{ detailData.oid?detailData.oid:'' }}
      <svg-icon icon-class="ico_print" class="no-print" style="float: right;margin-right: 5%;font-size: 30px;cursor: pointer;" @click="downloadPrint"></svg-icon>
      <svg-icon icon-class="ico_pdf" class="no-print" style="float: right;margin-right: 33px;font-size: 30px;cursor: pointer;" @click="downloadPDF"></svg-icon>
    </h2>
    <Pathnavigation style="margin-left: 3%;"></Pathnavigation>
    <div id="printDeliveryOrder" ref="print">
      <el-card shadow="always" class="one-card" :body-style="{ padding: '15px 0 25px 20px' }"  v-if="role != dealerValue" style="width: 94%;text-align: left;margin: 0 3% 10px 3%;">
        <div style="width: 60%;margin-top: 10px;">
          <h2 class="title">Evo Oil</h2>
          <div class="head-info-three">
            <span>
              <svg-icon icon-class="ico_address" style="font-size: 18px;margin-right: 6px;"></svg-icon>
              {{detailData.dealerBrief.shopAddr.streetAddress + ', ' +detailData.dealerBrief.shopAddr.regionalAddress + ', ' + detailData.dealerBrief.shopAddr.postCode + ', ' + detailData.dealerBrief.shopAddr.city + ', ' + detailData.dealerBrief.shopAddr.region}}</span>
          </div>
          <div class="head-info-three">
            <span>
              <svg-icon icon-class="ico_mail" style="font-size: 18px;margin-right: 6px;"></svg-icon>
             {{detailData.dealerBrief.emailAddress}}</span>
          </div>
          <div class="head-info-three">
            <span>
              <svg-icon icon-class="ico_phone" style="font-size: 18px;margin-right: 6px;"></svg-icon>
              {{detailData.dealerBrief.shopAddr.phoneNumber}}</span>
          </div>
        </div>
        <div class="header-div">
          <el-image
            style="width: 70px;height: 70px;"
            :src="require('@/assets/m_logo.png')"></el-image>
        </div>
      </el-card>
      <el-card shadow="always" class="one-card" :body-style="{ padding: '15px 0 25px 20px' }" v-else style="width: 94%;text-align: left;margin: 0 3% 10px 3%;">
        <div style="width: 60%;margin-top: 10px;">
          <h2 class="title">{{detailData.dealerBrief.dealerName}}</h2>
          <div class="head-info-three">
            <span>
              <svg-icon icon-class="ico_address" style="font-size: 18px;margin-right: 6px;"></svg-icon>
              {{detailData.dealerBrief.shopAddr.streetAddress + ', ' +detailData.dealerBrief.shopAddr.regionalAddress + ', ' + detailData.dealerBrief.shopAddr.postCode + ', ' + detailData.dealerBrief.shopAddr.city + ', ' + detailData.dealerBrief.shopAddr.region}}</span>
          </div>
          <div class="head-info-three">
            <span>
              <svg-icon icon-class="ico_mail" style="font-size: 18px;margin-right: 6px;"></svg-icon>
             {{detailData.dealerBrief.emailAddress}}</span>
          </div>
          <div class="head-info-three">
            <span>
              <svg-icon icon-class="ico_phone" style="font-size: 18px;margin-right: 6px;"></svg-icon>
              {{detailData.dealerBrief.shopAddr.phoneNumber}}</span>
          </div>
        </div>
        <div class="header-div">
          <el-image
            style="width: 70px;height: 70px;"
            :src="picbase + detailData.dealerBrief.logoUrl"></el-image>
        </div>
      </el-card>
      <div class="card-div">
        <div class="two-card-not two-card-a margin-tops" style="height: 188px;">
          <el-card shadow="always" class="" :body-style="{ padding: '15px 0 10px 20px' }" style="margin-bottom: 10px">
            <p class="one-info"><label>Nombor Pesanan: </label>{{detailData.oid}}</p>
            <p class="one-info"><label>Tarikh: </label>{{ $getTime(detailData.updateAt) }}</p>
          </el-card>
          <el-card shadow="always" class="" :body-style="{ padding: '5px 0 0 20px' }">
            <el-form label-position="top" label-width="80px" :inline="true" class="head-search" style="float: left;text-align: left;margin: 0">
              <el-form-item label="Status" width="188">
                <el-select class="input-width" v-model="detailData.state" disabled @input="changeNew($event)" placeholder="Status">
                  <el-option v-for="(item, index) in $orderStateList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="Penghantaran Tarikh: " style="margin-left: 30px;">
                <el-date-picker
                  disabled
                  v-model="detailData.updateAt"
                  class="input-width"
                  type="datetime"
                  placeholder="Tarikh">
                </el-date-picker>
              </el-form-item>
<!--              <el-button-->
<!--                disabled-->
<!--                style="position: relative;top: 52px;margin-left: 30px;"-->
<!--                type="primary"-->
<!--                @click="handleUpdate()"-->
<!--                size="small">更新-->
<!--              </el-button>-->
            </el-form>
          </el-card>
        </div>
        <el-card shadow="always" class="two-card-not two-card-b margin-tops" style="margin-bottom: 20px;height: 218px;" :body-style="{ padding: '15px 0 25px 20px' }">
          <p class="one-info"><label>Jumlah Kecil: </label>{{$formatMoneyStr(detailData.puductFee)}}</p>
          <p class="one-info"><label>Jumlah Penghantaran: </label> {{$formatMoneyStr(detailData.deliveryFee)}}</p>
          <p class="one-info"><label>Penyesuaian: </label> {{$formatMoneyStr(detailData.adaptFee)}}</p>
          <p class="one-info"><label>Jumlah Pesanan: </label> {{$formatMoneyStr(detailData.subFee)}}</p>
        </el-card>
      </div>
      <div class="card-div">
        <el-card shadow="always" class="two-card margin-tops" :body-style="{ padding: '15px 0 25px 20px' }">
          <h2 class="title">Alamat Bil</h2>
          <p class="two-info"><i class="el-icon-coordinate"></i>{{detailData.billesAddres.name}}</p>
          <p class="two-info"><i class="el-icon-phone-outline"></i>{{detailData.billesAddres.phoneNumber}}</p>
          <p class="two-info"><i class="el-icon-location-outline"></i>{{detailData.billesAddres.streetAddress + ', ' +detailData.billesAddres.regionalAddress + ', ' + detailData.billesAddres.postCode + ', ' + detailData.billesAddres.city + ', ' + detailData.billesAddres.region}}</p>
        </el-card>
        <el-card shadow="always" class="two-card margin-tops" style="margin-bottom: 20px;" :body-style="{ padding: '15px 0 25px 20px' }">
          <h2 class="title">Alamat Penghantaran</h2>
          <p class="two-info"><i class="el-icon-coordinate"></i>{{detailData.shopAddres.name}}</p>
          <p class="two-info"><i class="el-icon-phone-outline"></i>{{detailData.shopAddres.phoneNumber}}</p>
          <p class="two-info"><i class="el-icon-location-outline"></i>{{detailData.shopAddres.streetAddress + ', ' +detailData.shopAddres.regionalAddress + ', ' + detailData.shopAddres.postCode + ', ' + detailData.shopAddres.city + ', ' + detailData.shopAddres.region}}</p>
<!--          <p class="two-info"><i class="el-icon-s-comment"></i>{{ detailData.sysOrderMsg.buyerMsg }}</p>-->
        </el-card>
      </div>
      <div>
        <el-table
          :data="detailData.detail"
          style="width: 92%;margin: 20px 4% 0 4%;padding-left: 10px;border-radius: 20px;text-align: center;">
          <el-table-column label="Logo" width="100">
            <template slot-scope="scope">
              <el-image
                style="width: 64px; height: 64px"
                :src="picbase + scope.row.picUrl"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="productName" align="center" label="Nama Produk"></el-table-column>
          <el-table-column prop="quantity" align="center" label="Kuantiti"></el-table-column>
          <el-table-column label="Harga Seunit">
            <template slot-scope="scope">
              <p>{{$formatMoneyStr(scope.row.price)}}</p>
              <p v-show="scope.row.buyunit">1 {{scope.row.buyunit}}</p>
            </template>
          </el-table-column>
          <el-table-column label="Jumlah">
            <template slot-scope="scope">
              <p>{{$formatMoneyStr(scope.row.allmoney)}}</p>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-table
            :data="detailData.stateChangeRecode"
            style="width: 92%;margin: 20px 4% 0 4%;padding-left: 10px;border-radius: 20px;text-align: center;">
            <el-table-column label="Tarikh Ditambah" width="288">
              <template slot-scope="scope">
                <p>{{$getTime(scope.row.stateChageAt)}}</p>
              </template>
            </el-table-column>
            <el-table-column prop="stateDescrip" label="Status"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="isDeliveryOrdershow" :show-close="false" style="text-align: center;">
      <div style="width: 49%;height: 75px;text-align: left;float: left;">
        <p style="line-height: 24px;"><label>Nombor Penghantaran</label>: {{detailData.invoiceId}}</p>
        <p style="line-height: 24px;"><label>Nombor Pesanan</label>: {{detailData.oid}}</p>
      </div>
      <div style="width: 49%;height: 75px;text-align: left;float: left;">
        <p style="line-height: 24px;"><label>Tarikh</label>: {{$getTime(detailData.createdAt)}}</p>
        <p style="line-height: 24px;"><label>Tarikh Penghantaran</label>: {{$getTime(detailData.deliveryAt)}}</p>
        <p style="line-height: 24px;"><label>Jumlah Produk</label>: {{ total }}</p>
      </div>
      <div style="width: 49%;text-align: left;float: left;border-top: 1px solid #304156;border-bottom: 1px solid #304156;">
        <h2 style="text-align: left;line-height: 52px;">Alamat Bil</h2>
        <div style="width: 60%;float: left;margin-bottom: 10px;">
          <svg-icon icon-class="ico_user" style="font-size: 18px;margin-right: 6px;float: left;line-height: 32px;"></svg-icon>
          <p>{{ detailData.billesAddres.name }}</p>
        </div>
        <div style="width: 40%;float: left;margin-bottom: 10px;">
          <svg-icon icon-class="ico_phone" style="font-size: 18px;margin-right: 6px;float: left;line-height: 32px;"></svg-icon>
          <p>{{detailData.billesAddres.phoneNumber}}</p>
        </div>
        <div style="width: 100%;float: left;margin-bottom: 10px;">
          <svg-icon icon-class="ico_address" style="font-size: 18px;margin-right: 6px;float: left;line-height: 32px;"></svg-icon>
          <p>{{ detailData.billesAddres.streetAddress }}<br>{{ detailData.billesAddres.regionalAddress }}</p>
        </div>
      </div>
      <div style="width: 49%;padding-left: 15px;text-align: left;float: left;border-top: 1px solid #304156;border-left: 1px solid #304156;border-bottom: 1px solid #304156;">
        <h2 style="text-align: left;line-height: 52px;">Alamat Penghantaran</h2>
        <div style="width: 60%;float: left;margin-bottom: 10px;">
          <svg-icon icon-class="ico_user" style="font-size: 18px;margin-right: 6px;float: left;line-height: 32px;"></svg-icon>
          <p>{{ detailData.shopAddres.name }}</p>
        </div>
        <div style="width: 40%;float: left;margin-bottom: 10px;">
          <svg-icon icon-class="ico_phone" style="font-size: 18px;margin-right: 6px;float: left;line-height: 32px;"></svg-icon>
          <p>{{detailData.shopAddres.phoneNumber}}</p>
        </div>
        <div style="width: 60%;float: left;margin-bottom: 10px;">
          <svg-icon icon-class="ico_address" style="font-size: 18px;margin-right: 6px;float: left;line-height: 32px;"></svg-icon>
          <p>{{ detailData.shopAddres.streetAddress }}<br>{{ detailData.shopAddres.regionalAddress }}</p>
        </div>
        <div style="width: 40%;float: left;margin-bottom: 10px;">
          <svg-icon icon-class="ico_delivery_note" style="font-size: 18px;margin-right: 6px;float: left;line-height: 32px;"></svg-icon>
          <p>{{detailData.sysOrderMsg.buyerMsg}}</p>
        </div>
      </div>
      <el-table
        :data="detailData.detail"
        style="width: 92%;margin: 20px 4% 0 4%;padding-left: 10px;border-radius: 20px;text-align: center;">
        <el-table-column
          label="No."
          type="index">
        </el-table-column>
        <el-table-column label="Imej" width="100">
          <template slot-scope="scope">
            <el-image
              style="width: 64px; height: 64px"
              :src="picbase + scope.row.picUrl"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="productName" align="center" label="Nama Produk"></el-table-column>
        <el-table-column prop="quantity" align="center" label="Kuantiti"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { downloadPDF } from '@/utils/exportToPdf'
import { order_editApi, infoMyorderApi } from '@/api/user'

export default {
  name: 'Report',
  computed: {
    ...mapGetters([
      'name',
      'role'
    ])
  },
  data() {
    return {
      isDeliveryOrdershow: false,
      total: 0,
      detailData: {
        sysOrderMsg: {},
        detail: [],
        stateChangeRecode: []
      }
    }
  },
  mounted() {
    this.checkID()
  },
  methods: {
    changeNew() {
      this.$forceUpdate()
    },
    checkID() {
      const oid = this.$route.params.id
      if (!(oid.length && oid.length > 3)) {
        this.$router.push({ path: '/My-Orders/Query' })
      }
      infoMyorderApi({
        oid: oid
      }).then(res => {
        this.detailData = res.data
        if (res.data) {
          if (res.data.detail) {
            if (res.data.detail.length) {
              if (res.data.detail.length > 0) {
                let list = res.data.detail
                for (let i = 0; i < list.length; i++) {
                  this.total = this.total + list[i].quantity
                }
              }
            }
          }
        }
        if (this.detailData.billesAddres == null) {
          this.detailData.billesAddres = {}
        }
        if (this.detailData.shopAddres == null) {
          this.detailData.shopAddres = {}
        }
        if (this.detailData.dealerBrief == null) {
          this.detailData.dealerBrief = {}
        }
      }).catch(err => {
        console.log(err)
      })
    },
    downloadPrint() {
      this.$print(this.$refs.print)
    },
    downloadPDF() {
      downloadPDF(document.querySelector('#printDeliveryOrder'), 'Purchase` Order #' + this.detailData.oid)
    },
    handleUpdate() {
      order_editApi({
        state: this.detailData.state,
        oid: this.detailData.oid
      }).then(res => {
        this.$message({
          message: 'Berjaya',
          type: 'success'
        })
        this.$router.push({ path: '/My-Orders/Query' })
      }).catch(err => {
        console.log(err)
      })
    }
  }
}

</script>

<style lang="scss" scoped>
  .dashboard {
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  .head-big-title{
    text-align: left;
    font-size: 20px;
    margin: 20px 0 0 3%;
  }
  .big-title{
    text-align: left;
    font-size: 19px;
    margin: 20px 0 20px 3%;
    clear: both;
  }
  .dashboard-container{
    margin-top: 20px;
    text-align: center;
  }

  .two-card-not + .two-card-not{
    margin-left: 2%;
  }
  .two-card-a{
    width: 65%;
  }
  .two-card-b{
    width: 33%;
  }
  .two-card-not{
    text-align: left;
    float: left;

    .title{
      display: block;font-size: 15px;margin: 0;
    }
    .count{
      font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
    }
  }
  .two-card + .two-card{
    margin-left: 2%;
  }

  .two-card{
    width: 49%;
    text-align: left;
    float: left;

    .title{
      display: block;font-size: 15px;margin: 0;
    }
    .count{
      font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
    }
  }
  .one-card{
    width: 100%;
    text-align: left;
    float: left;

    .title{
      display: block;font-size: 19px;margin: 0;
    }
    .count{
      font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
    }
  }
  .last-days-order{
    width: 92%;
    margin: 0 4%;
    border-radius: 20px;
  }
  .last-days-order .erchart-div{
    height:278px;display: inline-block;background-color: white;border-radius: 10px;
  }
  .header-div{
    float: right;
    text-align: center;
    margin-right: 64px;
    position: relative;
    bottom: 21px;
  }
  .header-div p{
    margin: 10px 0;
  }
  .header-div img{
    width: 64px;
    height: 64px;
  }
  .head-info-three{
    width: 28%;
    margin-right: 20px;
    margin-bottom: 15px;
    display: inline;
    float: left;
  }
  .card-div{
    width: 94%;text-align: left;margin: 0 3%
  }
  .margin-tops{
    margin-top: 5px;
  }
  .card-div .middle-info{
    width: 32%;
    display: inline-block;
    margin: 8px 0;
  }
  .total-sum-div{
    padding: 20px;
    text-align: left;
    width: 420px;float: right;margin-right: 4%;
  }
  .total-sum-div .middle-info{
    margin-left: 60px;
  }
  .total-sum-div .middle-info label{
    width: 100px;
    display: inline-block;
  }
  .card-div .two-info{
    width: 49%;
    display: inline-block;
    margin: 8px 0;
    i{
      width: 21px;
    }
  }
  .card-div .one-info{
    display: block;
    margin: 8px 0;
    label{
      display: inline-block;
      width: 188px;
    }
  }
</style>
